<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<div id="app">
    <!-- 使用组件 -->
    <login></login>


</div>
</body>
</html>

<script src="../js/v2.6.10/vue.js"></script>
<script>

    const login = {
        template:`<div><h2>登录局部组件 {{count}}</h2><button @click="test(10)">点击</button> {{test2}}--{{test2}}
          <p><aa></aa></p>
        </div>`,
        data() {//用来给当前组件
            return {
                count: 10
            }
        },methods:{
            test(count){
                console.log(this.count)
                this.count +=count;
            }
        },computed:{
            test2(){
                console.log(this.count)
                return this.count*this.count;
            }
        },beforeCreate() {
        },created(){

        },beforeMount(){

        },mounted(){

        },beforeUpdate(){

        },updated(){

        },beforeDestroy() {
        },destroyed(){

        },
        components:{
            aa:{
                template: `<div>我是子组件</div>`
            }
        }
    }

    const app = new Vue({
        el: "#app",
        components:{
            //注册局部组件
            login
        }
    });

</script>